<template>
  <!--
    Cesium 示例页：演示折线组件使用（中文注释）
    - 包含一个充满页面的 CesiumViewer，通过插槽挂载 PolylineEntity 组件
  -->
  <div class="page-wrap">
    <CesiumViewer :options="viewerOptions" :camera="camera" ref="mapDomRef">
      <template #entities>
        <!-- 传入静态示例数据，演示折线（实线） -->
        <PolylineEntity :positions="polylinePositions" :width="4" :material="'#ff7f50'" />
        <!-- 演示虚线材质 -->
        <PolylineEntity :positions="polylinePositions2" :width="3" :material="{type: 'dash', color: '#00e5ff', dashLength: 24}" />
      </template>
    </CesiumViewer>
  </div>
</template>

<script setup>
// 中文注释：演示页面，提供两条折线（实线与虚线），变量与静态数据均配中文说明
import CesiumViewer from "@/components/cesium/CesiumViewer.vue";
import PolylineEntity from "@/components/cesium/PolylineEntity.vue";

import { watch, ref, computed, nextTick } from "vue";
import * as Cesium from "cesium";
const mapDomRef = ref(null);
// 计算属性
const viewer = computed(() => mapDomRef.value?.getViewer());

// 使用一个标志防止递归更新
let isViewSet = false;

// 监听viewer.value的变化
watch(viewer, (newVal) => {
  console.log('监听viewer.value的变化');
  if (newVal && !isViewSet) {
    isViewSet = true;
    // 使用nextTick确保在DOM更新后设置视角
    nextTick(() => {
      try {
        newVal.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(121.47, 31.23, 100000),
        });
      } catch (e) {
        console.error("设置视角时出错:", e);
      }
    });
  }
});

// 对象：Viewer 基本选项
// - animation：是否显示动画面板
// - baseLayerPicker：是否显示底图切换器
// - geocoder：是否显示地名搜索
// - timeline：是否显示时间轴
// - fullscreenButton：是否显示全屏按钮
// - sceneModePicker：是否显示 2D/3D 切换
const viewerOptions = {
  animation: false,
  baseLayerPicker: false,  // 设置为false避免访问Cesium Ion资源
  geocoder: false,
  timeline: false,
  fullscreenButton: true,
  sceneModePicker: true,
};

// 对象：初始相机参数（单位：度/米）- 页面初次进入时的默认视角
// - lon：经度（度）
// - lat：纬度（度）
// - height：高度（米）
// - heading：偏航角（度）
// - pitch：俯仰角（度）
// - roll：翻滚角（度）
const camera = {
  lon: 104.195397,
  lat: 35.86166,
  height: 2500000,
  heading: 0,
  pitch: -45,
  roll: 0,
};

// 数组：静态示例数据：一条华东地区的折线
// 每个点对象属性：lon（经度，度）、lat（纬度，度）、height（高度，米）
const polylinePositions = [
  { lon: 121.47, lat: 31.23, height: 0 }, // 上海
  { lon: 120.16, lat: 30.25, height: 0 }, // 杭州
  { lon: 118.78, lat: 32.04, height: 0 }, // 南京
  { lon: 117.2, lat: 39.12, height: 0 }, // 天津
];

// 数组：第二条示例折线（珠三角附近，使用虚线材质）
// 每个点对象属性：lon（经度，度）、lat（纬度，度）、height（高度，米）
const polylinePositions2 = [
  { lon: 113.26, lat: 23.13, height: 0 }, // 广州
  { lon: 113.62, lat: 22.37, height: 0 }, // 珠海
  { lon: 114.05, lat: 22.55, height: 0 }, // 深圳
  { lon: 113.27, lat: 23.13, height: 0 }, // 回广州
];


</script>

<style scoped>
.page-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /* 确保容器有明确的尺寸 */
  min-height: 500px;
}
</style>